<template>
  <div class="statusTag">
    <el-tag v-if="row.order.isException === 1" type="danger">Exception</el-tag>
    <template v-else>
      <el-tag type="primary">{{ orderStatusLabelMap[row.order.orderStatus] }}</el-tag>
      <template v-if="row.order.isAppeal === 1">
        <el-tag type="warning">In the complaint</el-tag>
      </template>
      <template v-if="pageName === 'ALL'||pageName === 'PROCESSING'">
        <el-tag v-if="row.order.isUrgent === 1">Urgent</el-tag>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      required: true
    },
    pageName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      orderStatusLabelMap: {
        0: 'PENDING',
        1: 'CONFIRM',
        2: 'PROCESSING',
        3: 'UNPACKED',
        4: 'SELF FULFILL',
        5: 'PACKED',
        6: 'UNSHIPPED',
        7: 'VIRTUAL SHIPPED',
        8: 'SHIPPED',
        9: 'TRASH'
      }
    };
  }
};
</script>

<style scoped lang='scss'>
.el-tag {
  display: inline-block;
  height: auto;
  white-space: inherit;
  margin-bottom: 4px;
  line-height: 18px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
